<template>
  <div class="matchingAnalysis">
    <el-card shadow="hover">
      <div class="searchBox">
        <div>
          <h3>匹配分析</h3>
        </div>
        <div>
          <el-date-picker
            v-model="matchingAnalysisTimeVal"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="channelPickerOptions"
            value-format="yyyy-MM-dd"
            @change="focus"
          >
          </el-date-picker>
          <el-button
            class="btn"
            icon="el-icon-search"
            @click="matchingAnalysisBtn"
            >查询搜索</el-button
          >
          <!-- <el-button class="btn" icon="el-icon-download">导出Excel</el-button> -->
        </div>
      </div>
      <!-- 匹配分析卡片 -->
      <div class="userStatisticsItem">
        <el-card class="one">
          <h4>点击喜欢人数</h4>
          <div>
            <span class="numSpan">{{ likePersonNumber }}</span>
            <el-divider></el-divider>
            <span>{{ time }}</span>
          </div>
        </el-card>
        <el-card class="one">
          <h4>点击喜欢次数</h4>
          <div>
            <span class="numSpan">{{ clickLikeNumber }}</span>
            <el-divider></el-divider>
            <span>{{ time }}</span>
          </div>
        </el-card>
        <el-card class="one">
          <h4>匹配成功数</h4>
          <div>
            <span class="numSpan">{{ matchingNumber }}</span>
            <el-divider></el-divider>
            <span>{{ time }}</span>
          </div>
        </el-card>
        <el-card class="one">
          <h4>匹配成功率</h4>
          <div>
            <span class="numSpan">{{ matchingRate }}</span>
            <el-divider></el-divider>
            <span>{{ time }}</span>
          </div>
        </el-card>
      </div>
      <!-- 性别分布 -->
      <div class="genderDistributionSearch">
        <el-select v-model="genderValue" clearable placeholder="男">
          <el-option
            v-for="item in genderOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-date-picker
          v-model="genderTimeVal"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="genderPickerOptions"
          value-format="yyyy-MM-dd"
          @change="genderFocus"
        >
        </el-date-picker>
        <el-button class="btn" icon="el-icon-search" @click="genderBtn"
          >查询搜索</el-button
        >
        <!-- <el-button class="btn" icon="el-icon-download">导出Excel</el-button> -->
      </div>
      <div class="chartBox">
        <div id="myChartA" :style="{ width: '100%', height: '500px' }"></div>
        <div id="myChartB" :style="{ width: '100%', height: '500px' }"></div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { matchAnalysis, genderAnalysis } from "@/api/DataAnalysis";
export default {
  data() {
    return {
      //匹配分析
      channelPickerOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      likePersonNumber: "",
      clickLikeNumber: "",
      matchingNumber: "",
      matchingRate: "",
      time: "",
      matchingAnalysisTimeValStartDate: "",
      matchingAnalysisTimeValEndDate: "",
      matchingAnalysisTimeVal: "", //匹配分析时间
      //性别分析
      genderPickerOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      matchingData: [],
      likeData: "",
      genderTimeValStartDate: "",
      genderTimeValEndDate: "",
      genderTimeVal: "", //性别分析时间
      genderOptions: [
        {
          value: "1",
          label: "男",
        },
        {
          value: "2",
          label: "女",
        },
        {
          value: "3",
          label: "其他",
        },
      ],
      genderValue: "", //性别分布下拉框
    };
  },
  methods: {
    //匹配分析查询按钮
    matchingAnalysisBtn() {
      matchAnalysis({
        startTime: this.matchingAnalysisTimeValStartDate,
        endTime: this.matchingAnalysisTimeValEndDate,
      }).then((res) => {
        if (res.code == 0) {
          this.likePersonNumber = res.data.likePersonNumber;
          this.clickLikeNumber = res.data.clickLikeNumber;
          this.matchingNumber = res.data.matchingNumber;
          this.matchingRate = res.data.matchingRate;
          this.time = res.data.matchingAnalysisTimeVal;
        }
      });
    },
    //性别分析查询按钮
    genderBtn() {
      this.pin();
    },
    //性别分析饼图
    async pin() {
      const res = await genderAnalysis({
        genderValue: this.genderValue,
        genderTimeValEndDate: this.genderTimeValEndDate,
        genderTimeValStartDate: this.genderTimeValStartDate,
      });
      // 基于准备好的dom，初始化echarts实例
      let myChartA = this.$echarts.init(document.getElementById("myChartA"));
      // 绘制图表
      myChartA.setOption({
        color: ["#59b2ef", "#2ac8ca", "#ffba81"],
        title: {
          text: "匹配成功性别分布",
          subtext: "",
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: ["女", "男", "其他"],
        },
        series: [
          {
            name: "性别分布",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: res.data.matchingData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });

      // 基于准备好的dom，初始化echarts实例
      let myChartB = this.$echarts.init(document.getElementById("myChartB"));
      // 绘制图表
      myChartB.setOption({
        color: ["#59b2ef", "#2ac8ca", "#ffba81"],
        title: {
          text: "喜欢性别分布",
          subtext: "",
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: ["女", "男", "其他"],
        },
        series: [
          {
            name: "性别分布",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: res.data.likeData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    },
    //匹配分析时间
    focus(time) {
      if (!this.matchingAnalysisTimeVal) {
        this.matchingAnalysisTimeVal = [];
      }
      this.matchingAnalysisTimeValStartDate = this.matchingAnalysisTimeVal[0];
      this.matchingAnalysisTimeValEndDate = this.matchingAnalysisTimeVal[1];
    },
    //性别分析时间
    genderFocus(time) {
      if (!this.genderTimeVal) {
        this.genderTimeVal = [];
      }
      this.genderTimeValStartDate = this.genderTimeVal[0];
      this.genderTimeValEndDate = this.genderTimeVal[1];
    },
  },
  created() {
    // this.pin();
    matchAnalysis().then((res) => {
      if (res.code == 0) {
        this.likePersonNumber = res.data.likePersonNumber;
        this.clickLikeNumber = res.data.clickLikeNumber;
        this.matchingNumber = res.data.matchingNumber;
        this.matchingRate = res.data.matchingRate;
        this.time = res.data.matchingAnalysisTimeVal;
      }
    });
  },
  mounted() {
    this.pin();
  },
};
</script>

<style lang="less" scoped>
.matchingAnalysis {
  margin: 30px;
  height: 100%;
  .searchBox {
    display: flex;
    justify-content: space-between;
  }
  .userStatisticsItem {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
    .el-divider--horizontal {
      margin: 10px 0px;
    }
    .one {
      width: 300px;
      height: 100%;
      h4 {
        margin: 0px;
        font-size: 20px;
        margin-bottom: 10px;
      }
      .numSpan {
        font-size: 26px;
      }
    }
  }
  .genderDistributionSearch {
    display: flex;
    justify-content: flex-end;
    .el-select {
      margin-right: 20px;
    }
  }
  .chartBox {
    display: flex;
    margin-top: 80px;
  }
}
</style>